<template>
	<menuheader ref='menuheader' icon='back' :iconsize="18">{{strdate}}饮食方案</menuheader>
	<view class='meal-choose-box' v-if='stepIndex==-1' :style="{height: setting.containerHeight + 'px'}">
		<view class='meal-choose-title'>午晚餐是否一起准备？</view>
		<view class='meal-choose-wrapper'>
			<csswitch type='single' @method='switchLunchDinner' :checked="daySetting.lunchDinnerFlag" :param='{}' class='meal-choose-switch'></csswitch>
		</view>
		<view class='meal-choose-title'>请选择需要调整的餐次</view>
		<view class='meal-choose-wrapper'>
			<block v-for="(meal, mealIndex) in daySetting.mealList" :key="mealIndex">
				<csbtn :text="meal.name" type="default" size='big' @method='selectMeal' class='meal-choose-item' :param='{index: mealIndex}' v-if='meal.selectedflag!=1'></csbtn>
				<csbtn :text="meal.name" type="primary" size='big' @method='selectMeal' class='meal-choose-item' :param='{index: mealIndex}' v-if='meal.selectedflag==1'></csbtn>
			</block>
		</view>
		<uni-section title="当前菜谱" type="line" class='section-box' titleFontSize="15px">
			<view class='meal-choose-meals'>
				<uni-card shadow='0px 0px 10px 5px rgba(0, 0, 0, 0.8)' padding='10px' spacing='0px' margin='0px' :isShadow='false' 
					:title="meal.name + '(' + meal.usecount + '人)'" :class='daySetting.lunchDinnerFlag?"meal-choose-combinemeal":"meal-choose-meal"' 
					v-for="(meal, mealIndex) in daySetting.mealList" :key="mealIndex">
					<view class="meal-choose-food" v-for="(food, foodIndex) in meal.foodList" :key="foodIndex">{{food.name}}</view>
				</uni-card>
			</view>
		</uni-section>
		<csbtn text="下一步" type="primary" size='big' @method='startConfig' class='meal-choose-btn'></csbtn>
	</view>
	<view class='setting-box' v-if='stepIndex!=-1'>
		<uni-steps :options="steps" :active="stepCurrent" class='setting-steps'></uni-steps>
		<view class='foodresult-wrapper' v-if='stepIndex>1'>
			<scroll-view class='foodresult-tabbar' scroll-x='true' scroll-y='false' enable-flex='true'>
				<block v-for="(meal, mealIndex) in daySetting.mealList" :key="mealIndex">
					<view class='foodresult-tab-item'  @click="checkFoodResultMeal" :data-index='mealIndex' v-if='meal.selectedflag'>
						<view class='foodresult-item-name' :class='daySetting.foodResultTabIndex==mealIndex?"active":""'>{{meal.name}}</view>
						<view class='foodresult-item-line' v-if="daySetting.foodResultTabIndex==mealIndex"></view>
					</view>
				</block>
			</scroll-view>
		</view>
		<swiper :current='stepCurrent' @change='changeStep' class='step-wrapper' :style="{height: stepSwiperHeight + 'px'}">
			<swiper-item vertical="true">
				<view class='person-box'>
					<block v-for="(meal, mealIndex) in daySetting.mealList" :key="mealIndex">
						<uni-section :title="meal.name + '就餐人员(' + meal.usecount + '人)'" type="line" class='section-box' v-if='meal.selectedflag'>
							<template v-slot:right>
								<view class='list-item-btn' @click="addPerson" data-useflag='1'>
									<uni-icons type="plusempty" size="24" :color="setting.corb"></uni-icons>
								</view>
							</template>
							<view class='person-list'>
								<block v-for="(person, personIndex) in meal.personList" :key="personIndex">
									<uni-card title="" :isFull="true" :thumbnail="person.head" class='person-item'>
										<template v-slot:title>
											<csswitch type='list' @labelclick='editPerson' :labelclickflag='true' @method='switchPerson' :checked="person.useflag==1" :param='{mealindex: mealIndex, personindex: personIndex}' :title='person.name'></csswitch>
										</template>
										<view class='person-detail'>
											<text class='person-remark'>年龄:{{person.age}} BMI:{{person.bmi}}</text>
											<progress v-if='person.bmi<person.bmimin' class='person-bmi' :percent='person.bmi * 100 / 1.2 / person.bmimax' border-radius='10' stroke-width='10' :activeColor='setting.coro' :backgroundColor='setting.corgw'></progress>
											<progress v-else-if='person.bmi<person.bmimax' class='person-bmi' :percent='person.bmi * 100 / 1.2 / person.bmimax' border-radius='10' stroke-width='10' :activeColor='setting.corb' :backgroundColor='setting.corgw'></progress>
											<progress v-else class='person-bmi' :percent='person.bmi * 100 / 1.2 / person.bmimax' border-radius='10' stroke-width='10' :activeColor='setting.corr' :backgroundColor='setting.corgw'></progress>
										</view>
										<view class='tag-box'>
											<text class="tag-item" v-for="(tag, tagIndex) in person.tags" :key="tagIndex" vertical="true">{{tag.label}}</text>
										</view>
										<!-- <view slot="actions" class="card-actions">
											<view class="card-actions-item" @click="editPerson" :data-mealindex='mealIndex' :data-personindex='personIndex' :data-useflag='person.useflag'>
												<uni-icons type="compose" size="18" :color="setting.corg"></uni-icons>
												<text class="card-actions-item-text cor-g">编辑</text>
											</view>
											<view class="card-actions-item" @click="deletePerson" :data-id='person.id' :data-mealindex='mealIndex' :data-personindex='personIndex'>
												<uni-icons type="trash" size="18" :color="setting.corg"></uni-icons>
												<text class="card-actions-item-text cor-g">删除</text>
											</view>
										</view> -->
									</uni-card>
								</block>
							</view>
						</uni-section>
					</block>
				</view>
			</swiper-item>
			<swiper-item vertical="true">
				<view class='meal-setting-box'>
					<uni-section title="根据指定食材匹配菜品" type="line" sub-title="剩余的食材备餐, 无特殊要求则无需选择">
						<view class='meal-setting-material-box'>
							<view class='meal-setting-material-labels' @click="showMaterialDrawer">
								<view class='meal-setting-material-label' v-for="(restMaterial, restMaterialIndex) in daySetting.restMaterialList" :key="restMaterialIndex">
									<text>{{restMaterial.name}}</text>
									<view :data-index="restMaterialIndex" @click.stop="deleteRestMaterial">
										<uni-icons type='closeempty' size="12" :color="setting.corg" class='label-close'></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</uni-section>
					<block v-for="(meal, mealIndex) in daySetting.mealList" :key="mealIndex">
						<uni-section :title="'指定' + meal.name + '菜品'" type="line" sub-title="无特殊要求则无需选择, AI营养师会为您推荐菜品">
							<view class='meal-setting-material-box'>
								<view class='meal-setting-material-labels' @click="showFoodDrawer" :data-mealindex='mealIndex'>
									<view class='meal-setting-material-label' v-for="(appointFood, appointFoodIndex) in meal.appointFoodList" :key="appointFoodIndex">
										<text>{{appointFood.name}}</text>
										<view :data-index="appointFoodIndex" @click.stop="deleteAppointFood"><uni-icons type='closeempty' size="20" :color="setting.corg" class='label-close'></uni-icons></view>
									</view>
								</view>
							</view>
							<uni-drawer ref="foodDrawer" mode="left" :width="setting.windowWidth * 3/ 4" @change="changeDrawer($event,'showLeft')">
								<view class="close">
									<button @click="closeFoodDrawer"><text class="word-btn-white">关闭Drawer</text></button>
								</view>
							</uni-drawer>
						</uni-section>
					</block>
				</view>
			</swiper-item>
			<block v-for="(meal, mealIndex) in daySetting.mealList" :key="mealIndex">
				<swiper-item class='foodresult-swiper-box' v-if='meal.selectedflag'>
					<view class='foodresult-box'>
						<scroll-view :scroll-x="false" :scroll-y="true" :style='{height: stepSwiperHeight + "px"}'>
							<view class='group-item' v-for="(food, foodIndex) in meal.foodList" :key="foodIndex">
								<view class='image-wrapepr'>
									<image :src='food.cover' class='group-image' mode='widthFix'></image>
									<view class='image-name'>{{food.name}}</view>
								</view>				
							</view>
							<uni-section padding="0px 10px" class='foodresult-block' title="营养元素" :sub-title="'本餐热量为(' + daySetting.energy + ')kcal'" type='line'>
								<template v-slot:right>
									<view class='foodresult-func-change' @click="checkEnergyExpand">
										<view><uni-icons type="right" size="12" color="setting.corg" v-if="!daySetting.energyExpandFlag"></uni-icons></view>
										<view><uni-icons type="bottom" size="12" color="setting.corg" v-if="daySetting.energyExpandFlag"></uni-icons></view>
									</view>
								</template>
								<view class='foodresult-statistic' v-if='daySetting.energyExpandFlag'>
									<view class='foodresult-section'>
										<view class='foodresult-nutrition-data'>
											<view class='foodresult-nutrition-block' v-for="(nutrition, nutritionIndex) in daySetting.mealList[daySetting.foodResultTabIndex].nutritions" :key="nutritionIndex">
												<view class='foodresult-nutrition-name'>{{nutrition.name}}({{nutrition.value}}{{nutrition.unit}})</view>
												<view class='foodresult-nutrition-remark'>
													<progress class='foodresult-nutrition-progress foodresult-nutrition-left' :percent='nutrition.percent' stroke-width='16' backgroundColor='#f1f1f1' activeColor='#ed1c24' border-radius='20' v-if='nutrition.max<nutrition.value'></progress>
													<progress class='foodresult-nutrition-progress foodresult-nutrition-left' :percent='nutrition.percent' stroke-width='16' backgroundColor='#f1f1f1' activeColor='#33b4ff' border-radius='20' v-else-if='nutrition.value>=nutrition.rec'></progress>
													<progress class='foodresult-nutrition-progress foodresult-nutrition-left' :percent='nutrition.percent' stroke-width='16' backgroundColor='#f1f1f1' activeColor='#999999' border-radius='20' v-else-if='nutrition.value<=nutrition.min'></progress>
													<progress class='foodresult-nutrition-progress foodresult-nutrition-left' :percent='nutrition.percent' stroke-width='16' backgroundColor='#f1f1f1' activeColor='#f39801' border-radius='20' v-else-if='nutrition.value<nutrition.rec'></progress>
													<view class='foodresult-nutrition-rec foodresult-nutrition-right'></view>
												</view>
												<view class='foodresult-nutrition-contains'>
													<view class='foodresult-nutrition-label'>本餐推荐量</view>
													<view class='foodresult-nutrition-value'>{{nutrition.min}}~{{nutrition.max}}{{nutrition.unit}}</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</uni-section>
							<uni-section padding="0px 10px" class='foodresult-block' title="本餐就餐人员" :sub-title="'就餐人员('+ daySetting.mealList[daySetting.foodResultTabIndex].personList.length +')人'" type='line' >
								<template v-slot:right>
									<view class='foodresult-func-change' @click="checkPersonExpand">
										<view><uni-icons type="right" size="12" color="setting.corg" v-if="!daySetting.personExpandFlag"></uni-icons></view>
										<view><uni-icons type="bottom" size="12" color="setting.corg" v-if="daySetting.personExpandFlag"></uni-icons></view>
									</view>
								</template>
								<view class='foodresult-statistic' v-if="daySetting.personExpandFlag">
									<view class='foodresult-section' v-if="daySetting.mealList[daySetting.foodResultTabIndex].personStatusList.length>0">
										<view class='foodresult-section-table'>
											<view class='foodresult-data-block' v-for="(prop, propIndex) in daySetting.mealList[daySetting.foodResultTabIndex].personStatusList" :key="propIndex">
												<view class='foodresult-data-title'>{{prop.name}}</view>
												<view class='foodresult-data-rows'>
													<view class='foodresult-data-row' v-for="(item, itemIndex) in prop.list" :key="itemIndex">
														<view class='foodresult-data-label'>{{item.name}}</view>
														<view class='foodresult-data-value'>({{item.count}})</view>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</uni-section>
						</scroll-view>
					</view>
				</swiper-item>
			</block>
			<!-- <swiper-item vertical="true">
				<view class='foodresult-box'>
					<swiper class="foodresult-swiper" :indicator-dots="resultConfig.indicatorDots"
						:autoplay="resultConfig.autoplay" :interval="resultConfig.interval" :duration="resultConfig.duration"
						@change="swipeFoodResultMeal" :current="daySetting.foodResultTabIndex" :style='{height: foodResultHeight + "px"}'>
						
					</swiper>
				</view>
			</swiper-item> -->
		</swiper>
		<uni-drawer ref="materialDrawer" mode="left" :width="setting.windowWidth * 3/ 4" @change="changeDrawer($event,'showLeft')">
			<material></material>
		</uni-drawer>
	</view>
</template>

<script>
	import csbtn from '@/components/csbtn.vue';
	import csswitch from '@/components/csswitch.vue';
	import group2 from '@/components/menugroup/group2.vue';
	import food2 from '@/components/food/food2.vue';
	import gui from '@/lib/gui.js';
	import dateutil from '@/lib/dateutil.js';
	import audio from '@/lib/audio.js';
	
	export default {
		components:{
			csbtn,
			csswitch,
			group2,
			food2
		},
		data() {
			return {
				strdate: dateutil.formatCNDate(dateutil.getCurrDate()),
				steps: [{title: '就餐人员'}, {title: '配餐方式'}, {title: '菜谱确认'}],
				stepIndex: -1,
				stepCurrent: 0,
				daySetting: {date: '2023-10-23', week: '周一', lunchDinnerFlag: true,
					restMaterialList: [
						{id: 1, name: '苹果'},
						{id: 2, name: '馒头'},
						{id: 3, name: '咸菜'},
						{id: 4, name: '胡萝卜'},
						{id: 5, name: '牛肉'}
					],
					nutrition: {totalMinEnergy: 1233, totalMaxEnergy: 1833, 
						energyList: [
							{label: '早餐', min: 233, max: 433, intake: 146, maxVal: 433*1.2, percent: 146 * 100 / 433 / 1.2}, 
							{label: '午餐', min: 532, max: 733, intake: 643, maxVal: 733*1.2, percent: 643 * 100 / 733 / 1.2}, 
							{label: '晚餐', min: 465, max: 733, intake: 1065, maxVal: 733*1.2, percent: 1065 * 100 / 733 / 1.2}],
						amdrList: [
							{label: '碳水化合物', min: 23, max: 32, maxVal: 32*1.2, intake: 18, percent: 18 * 100 / 32 / 1.2}, 
							{label: '蛋白质', min: 13, max: 23, maxVal: 23*1.2, intake: 25, percent: 25 * 100 / 23 / 1.2}, 
							{label: '脂肪', min: 10, max: 20, maxVal: 20*1.2, intake: 11, percent: 11 * 100 / 20 / 1.2}],
						},
					mealList: [
						{name: '早餐', type:'breakfast', energy: 433, usecount: 4, unusecount: 1, foodList: [
							{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}],
							personList: [
								{id: 1, name: '申宏', age:40, height: 177, weight:80, bmimin: 18.5, bmimax:23.9, bmi:25.5, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'糖尿病', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 1, hostflag: 1},
								{id: 2, name: '陶娅', age:41, height: 170, weight:52, bmimin: 18.5, bmimax:23.9, bmi:18.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'低血糖', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 1, hostflag: 1},
								{id: 3, name: '高高', age:13, height: 164.5, weight:45, bmimin: 18.5, bmimax:23.9, bmi:16.6, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 1, hostflag: 1},
								{id: 4, name: '陶宏韬', age:68, height: 178, weight:80, bmimin: 18.5, bmimax:24.9, bmi:25.2, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 1, hostflag: 0},
								{id: 5, name: '杜亚琼', age:68, height: 162, weight:55, bmimin: 18.5, bmimax:24.9, bmi:21.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 0, hostflag: 0}],
							nutritions: [{name: '能量', unit:'kcal', min: 500, rec: 800, max: 1400, value: 580, percent:90},
								{name: '蛋白质', unit:'g', min: 3, rec: 6, max: 12, value: 6, percent:100}, 
								{name: '碳水化合物', unit:'g', min: 3, rec: 6, max: 12, value: 1.2, percent:20},
								{name: '脂肪', unit:'g', min: 3, rec: 6, max: 8, value: 9, percent:150}],
							personStatusList:[
								{name: '劳动强度', unit:'人', list:[{name: '轻体力', count: 2}, {name: '中等体力', count: 0}, {name: '重体力', count: 1}]},
								{name: '生理状况', unit:'人', list:[{name: '正常', count: 1}, {name: '孕妇', count: 1}, {name: '乳母', count: 1}]},
								{name: '年龄段', unit:'人', list:[{name: '婴儿', count: 1}, {name: '青少年', count: 0}, {name: '成年人', count: 1}, {name: '老年人', count: 1}]},
							]
						},
						{name: '午晚餐', type:'lunch_dinner', energy: 1065, usecount: 0, unusecount: 5, foodList: [
							{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}],
							personList: [
								{id: 1, name: '申宏', age:40, height: 177, weight:80, bmimin: 18.5, bmimax:23.9, bmi:25.5, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'糖尿病', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 0, hostflag: 1},
								{id: 2, name: '陶娅', age:41, height: 170, weight:52, bmimin: 18.5, bmimax:23.9, bmi:18.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'低血糖', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 0, hostflag: 1},
								{id: 3, name: '高高', age:13, height: 164.5, weight:45, bmimin: 18.5, bmimax:23.9, bmi:16.6, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 0, hostflag: 1},
								{id: 4, name: '陶宏韬', age:68, height: 178, weight:80, bmimin: 18.5, bmimax:24.9, bmi:25.2, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 0, hostflag: 0},
								{id: 5, name: '杜亚琼', age:68, height: 162, weight:55, bmimin: 18.5, bmimax:24.9, bmi:21.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 0, hostflag: 0}],
							nutritions: [{name: '能量', unit:'kcal', min: 400, rec: 600, max: 1200, value: 480, percent:80},
								{name: '蛋白质', unit:'g', min: 3, rec: 6, max: 12, value: 6, percent:100}, 
								{name: '碳水化合物', unit:'g', min: 3, rec: 6, max: 12, value: 1.2, percent:20},
								{name: '脂肪', unit:'g', min: 3, rec: 6, max: 8, value: 9, percent:150}],
							personStatusList:[
								{name: '劳动强度', unit:'人', list:[{name: '轻体力', count: 2}, {name: '中等体力', count: 0}, {name: '重体力', count: 1}]},
								{name: '生理状况', unit:'人', list:[{name: '正常', count: 1}, {name: '孕妇', count: 1}, {name: '乳母', count: 1}]},
								{name: '年龄段', unit:'人', list:[{name: '婴儿', count: 1}, {name: '青少年', count: 0}, {name: '成年人', count: 1}, {name: '老年人', count: 1}]},
							]
						}],
					energyExpandFlag: true,
					energy: 5710.00,
					personExpandFlag: true,
					foodResultTabIndex: 0
				},
				dictLunchSeprateDinnerMealList: [
						{name: '早餐', type:'breakfast', energy: 433, usecount: 4, unusecount: 1, foodList: [
							{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}],
							personList: [
								{id: 1, name: '申宏', age:40, height: 177, weight:80, bmimin: 18.5, bmimax:23.9, bmi:25.5, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'糖尿病', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 1, hostflag: 1},
								{id: 2, name: '陶娅', age:41, height: 170, weight:52, bmimin: 18.5, bmimax:23.9, bmi:18.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'低血糖', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 1, hostflag: 1},
								{id: 3, name: '高高', age:13, height: 164.5, weight:45, bmimin: 18.5, bmimax:23.9, bmi:16.6, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 1, hostflag: 1},
								{id: 4, name: '陶宏韬', age:68, height: 178, weight:80, bmimin: 18.5, bmimax:24.9, bmi:25.2, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 1, hostflag: 0},
								{id: 5, name: '杜亚琼', age:68, height: 162, weight:55, bmimin: 18.5, bmimax:24.9, bmi:21.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 0, hostflag: 0}],
							nutritions: [{name: '能量', unit:'kcal', min: 500, rec: 800, max: 1400, value: 580, percent:90},
								{name: '蛋白质', unit:'g', min: 3, rec: 6, max: 12, value: 6, percent:100}, 
								{name: '碳水化合物', unit:'g', min: 3, rec: 6, max: 12, value: 1.2, percent:20},
								{name: '脂肪', unit:'g', min: 3, rec: 6, max: 8, value: 9, percent:150}],
							personStatusList:[
								{name: '劳动强度', unit:'人', list:[{name: '轻体力', count: 2}, {name: '中等体力', count: 0}, {name: '重体力', count: 1}]},
								{name: '生理状况', unit:'人', list:[{name: '正常', count: 1}, {name: '孕妇', count: 1}, {name: '乳母', count: 1}]},
								{name: '年龄段', unit:'人', list:[{name: '婴儿', count: 1}, {name: '青少年', count: 0}, {name: '成年人', count: 1}, {name: '老年人', count: 1}]},
							]
						},
						{name: '午餐', type:'lunch_dinner', energy: 1065, usecount: 0, unusecount: 5, foodList: [
							{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}],
							personList: [
								{id: 1, name: '申宏', age:40, height: 177, weight:80, bmimin: 18.5, bmimax:23.9, bmi:25.5, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'糖尿病', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 0, hostflag: 1},
								{id: 2, name: '陶娅', age:41, height: 170, weight:52, bmimin: 18.5, bmimax:23.9, bmi:18.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'低血糖', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 0, hostflag: 1},
								{id: 3, name: '高高', age:13, height: 164.5, weight:45, bmimin: 18.5, bmimax:23.9, bmi:16.6, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 0, hostflag: 1},
								{id: 4, name: '陶宏韬', age:68, height: 178, weight:80, bmimin: 18.5, bmimax:24.9, bmi:25.2, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 0, hostflag: 0},
								{id: 5, name: '杜亚琼', age:68, height: 162, weight:55, bmimin: 18.5, bmimax:24.9, bmi:21.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 0, hostflag: 0}],
							nutritions: [{name: '能量', unit:'kcal', min: 400, rec: 600, max: 1200, value: 480, percent:80},
								{name: '蛋白质', unit:'g', min: 3, rec: 6, max: 12, value: 6, percent:100}, 
								{name: '碳水化合物', unit:'g', min: 3, rec: 6, max: 12, value: 1.2, percent:20},
								{name: '脂肪', unit:'g', min: 3, rec: 6, max: 8, value: 9, percent:150}],
							personStatusList:[
								{name: '劳动强度', unit:'人', list:[{name: '轻体力', count: 2}, {name: '中等体力', count: 0}, {name: '重体力', count: 1}]},
								{name: '生理状况', unit:'人', list:[{name: '正常', count: 1}, {name: '孕妇', count: 1}, {name: '乳母', count: 1}]},
								{name: '年龄段', unit:'人', list:[{name: '婴儿', count: 1}, {name: '青少年', count: 0}, {name: '成年人', count: 1}, {name: '老年人', count: 1}]},
							]
						},
						{name: '晚餐', type:'lunch_dinner', energy: 1065, usecount: 0, unusecount: 5, foodList: [
							{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}],
							personList: [
								{id: 1, name: '申宏', age:40, height: 177, weight:80, bmimin: 18.5, bmimax:23.9, bmi:25.5, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'糖尿病', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 0, hostflag: 1},
								{id: 2, name: '陶娅', age:41, height: 170, weight:52, bmimin: 18.5, bmimax:23.9, bmi:18.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'低血糖', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 0, hostflag: 1},
								{id: 3, name: '高高', age:13, height: 164.5, weight:45, bmimin: 18.5, bmimax:23.9, bmi:16.6, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 0, hostflag: 1},
								{id: 4, name: '陶宏韬', age:68, height: 178, weight:80, bmimin: 18.5, bmimax:24.9, bmi:25.2, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 0, hostflag: 0},
								{id: 5, name: '杜亚琼', age:68, height: 162, weight:55, bmimin: 18.5, bmimax:24.9, bmi:21.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 0, hostflag: 0}],
							nutritions: [{name: '能量', unit:'kcal', min: 400, rec: 600, max: 1200, value: 480, percent:80},
								{name: '蛋白质', unit:'g', min: 3, rec: 6, max: 12, value: 6, percent:100}, 
								{name: '碳水化合物', unit:'g', min: 3, rec: 6, max: 12, value: 1.2, percent:20},
								{name: '脂肪', unit:'g', min: 3, rec: 6, max: 8, value: 9, percent:150}],
							personStatusList:[
								{name: '劳动强度', unit:'人', list:[{name: '轻体力', count: 2}, {name: '中等体力', count: 0}, {name: '重体力', count: 1}]},
								{name: '生理状况', unit:'人', list:[{name: '正常', count: 1}, {name: '孕妇', count: 1}, {name: '乳母', count: 1}]},
								{name: '年龄段', unit:'人', list:[{name: '婴儿', count: 1}, {name: '青少年', count: 0}, {name: '成年人', count: 1}, {name: '老年人', count: 1}]},
							]
						}],
				dictLunchCombineDinnerMealList: [
						{name: '早餐', type:'breakfast', energy: 433, usecount: 4, unusecount: 1, foodList: [
							{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}],
							personList: [
								{id: 1, name: '申宏', age:40, height: 177, weight:80, bmimin: 18.5, bmimax:23.9, bmi:25.5, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'糖尿病', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 1, hostflag: 1},
								{id: 2, name: '陶娅', age:41, height: 170, weight:52, bmimin: 18.5, bmimax:23.9, bmi:18.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'低血糖', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 1, hostflag: 1},
								{id: 3, name: '高高', age:13, height: 164.5, weight:45, bmimin: 18.5, bmimax:23.9, bmi:16.6, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 1, hostflag: 1},
								{id: 4, name: '陶宏韬', age:68, height: 178, weight:80, bmimin: 18.5, bmimax:24.9, bmi:25.2, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 1, hostflag: 0},
								{id: 5, name: '杜亚琼', age:68, height: 162, weight:55, bmimin: 18.5, bmimax:24.9, bmi:21.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 0, hostflag: 0}],
							nutritions: [{name: '能量', unit:'kcal', min: 500, rec: 800, max: 1400, value: 580, percent:90},
								{name: '蛋白质', unit:'g', min: 3, rec: 6, max: 12, value: 6, percent:100}, 
								{name: '碳水化合物', unit:'g', min: 3, rec: 6, max: 12, value: 1.2, percent:20},
								{name: '脂肪', unit:'g', min: 3, rec: 6, max: 8, value: 9, percent:150}],
							personStatusList:[
								{name: '劳动强度', unit:'人', list:[{name: '轻体力', count: 2}, {name: '中等体力', count: 0}, {name: '重体力', count: 1}]},
								{name: '生理状况', unit:'人', list:[{name: '正常', count: 1}, {name: '孕妇', count: 1}, {name: '乳母', count: 1}]},
								{name: '年龄段', unit:'人', list:[{name: '婴儿', count: 1}, {name: '青少年', count: 0}, {name: '成年人', count: 1}, {name: '老年人', count: 1}]},
							]
						},
						{name: '午晚餐', type:'lunch_dinner', energy: 1065, usecount: 0, unusecount: 5, foodList: [
							{name: '青椒炒肉丝', energy: 221, cover: '/static/image/test/2.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '狼牙土豆', energy: 432, cover: '/static/image/test/3.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'},
							{name: '水晶蛋糕', energy: 765, cover: '/static/image/test/5.jpg', video: 'http://res-mini.jctong.net/1593756443739.mp4'}],
							personList: [
								{id: 1, name: '申宏', age:40, height: 177, weight:80, bmimin: 18.5, bmimax:23.9, bmi:25.5, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'糖尿病', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 0, hostflag: 1},
								{id: 2, name: '陶娅', age:41, height: 170, weight:52, bmimin: 18.5, bmimax:23.9, bmi:18.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'低血糖', type:'b', color: '#ed1c24'}, {label:'减肥', type:'m', color: '#f39801'}, {label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 0, hostflag: 1},
								{id: 3, name: '高高', age:13, height: 164.5, weight:45, bmimin: 18.5, bmimax:23.9, bmi:16.6, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃猪肉', type:'x', color: '#33b4ff'}], useflag: 0, hostflag: 1},
								{id: 4, name: '陶宏韬', age:68, height: 178, weight:80, bmimin: 18.5, bmimax:24.9, bmi:25.2, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 0, hostflag: 0},
								{id: 5, name: '杜亚琼', age:68, height: 162, weight:55, bmimin: 18.5, bmimax:24.9, bmi:21.0, head: 'http://res-mini.jctong.net/1568684746048.jpg', tags: [{label:'不吃辣', type:'m', color: '#f39801'}], useflag: 0, hostflag: 0}],
							nutritions: [{name: '能量', unit:'kcal', min: 400, rec: 600, max: 1200, value: 480, percent:80},
								{name: '蛋白质', unit:'g', min: 3, rec: 6, max: 12, value: 6, percent:100}, 
								{name: '碳水化合物', unit:'g', min: 3, rec: 6, max: 12, value: 1.2, percent:20},
								{name: '脂肪', unit:'g', min: 3, rec: 6, max: 8, value: 9, percent:150}],
							personStatusList:[
								{name: '劳动强度', unit:'人', list:[{name: '轻体力', count: 2}, {name: '中等体力', count: 0}, {name: '重体力', count: 1}]},
								{name: '生理状况', unit:'人', list:[{name: '正常', count: 1}, {name: '孕妇', count: 1}, {name: '乳母', count: 1}]},
								{name: '年龄段', unit:'人', list:[{name: '婴儿', count: 1}, {name: '青少年', count: 0}, {name: '成年人', count: 1}, {name: '老年人', count: 1}]},
							]
						}],
				setting: {screenWidth:0, windowWidth:0, corg:'#cccccc'},
				stepSwiperHeight: 0,
				mealMethods: [
					{label: 'AI营养师推荐', method: 'ai', remark: '由营养师根据最新膳食营养指南自动推荐菜谱，营养更均衡，适用于大部分普通人群，吃得更健康'},
					{label: '已有食材配餐', method: 'has', remark: '剩余食材优先食用，避免食材不新鲜或过期无法食用'}
					/* ,{label: '手动配餐', method: 'manul', remark: '剩余食材优先食用，避免食材不新鲜或过期无法食用'}, */
					],
				mealData: {
					breakfast: [],
					lunch: [],
					dinner: [],
					breakfastCount: 3,
					lunchCount: 4,
					dinnerCount: 3
				},
				dictFoodCatList:[
					{text: '肉', value: 'meal'},
					{text: '蛋', value: 'egg'},
					{text: '奶', value: 'milk'},
					{text: '蔬菜', value: 'vegetable'},
					{text: '水果', value: 'fruit'},
					{text: '鱼虾贝', value: 'water'},
					{text: '豆类', value: 'bean'},
					{text: '主食', value: 'rice'},
					{text: '粗粮', value: 'coarse'}],
				resultConfig: {
					indicatorDots: false,
					autoplay: false,
					interval: 2000,
					duration: 500
				},
				foodResultHeight: 400
			}
		},
		onReady(){
			gui.init(this);
			this.foodResultHeight=this.setting.windowHeight - this.setting.statusBarHeight - this.setting.menuHeight - 60 - 50;
		},
		onLoad(options){
			if(options.strdate!=null){
				this.dtDate=dateutil.parseDate(options.strdate);
				this.strdate=dateutil.formatCNDate(this.dtDate);
			}
		},
		methods: {
			switchLunchDinner(obj){
				this.daySetting.lunchDinnerFlag=!this.daySetting.lunchDinnerFlag;
				if(this.daySetting.lunchDinnerFlag){
					this.daySetting.mealList=this.dictLunchCombineDinnerMealList;
				}else{
					this.daySetting.mealList=this.dictLunchSeprateDinnerMealList;
				}
			},
			
			selectMeal(obj){
				var index = obj.index;
				if(this.daySetting.mealList[index].selectedflag==null){
					this.daySetting.mealList[index].selectedflag=true;
				}else{
					this.daySetting.mealList[index].selectedflag=!this.daySetting.mealList[index].selectedflag;
				}
			},
			
			startConfig(){
				for(var i=0; this.daySetting.mealList!=null && i<this.daySetting.mealList.length; i++){
					if(this.daySetting.mealList[i].selectedflag){
						this.stepIndex=0;
						this.flushStepSwiperHeight();
						return;
					}
				}
				gui.showError('请先选择需要调整的餐次!');
			},

			changeStep(e){
				this.stepIndex=e.detail.current;
				if(this.stepIndex>1){
					this.daySetting.foodResultTabIndex=this.stepIndex-2;
					this.stepCurrent=2;
				}else{
					this.daySetting.foodResultTabIndex=0;
					this.stepCurrent=e.detail.current;
				}
				this.flushStepSwiperHeight();
			},
			
			flushStepSwiperHeight(){
				var that = this;
				if(that.stepIndex==0){
					setTimeout(()=>{
						let queryBox = uni.createSelectorQuery().in(that).select('.person-box');
						queryBox.boundingClientRect((rectBox)=>{
							that.stepSwiperHeight=rectBox.height;
						}).exec();
					}, 200);
				}else if(that.stepIndex==1){
					setTimeout(()=>{
						let queryBox = uni.createSelectorQuery().in(that).select('.meal-setting-box');
						queryBox.boundingClientRect((rectBox)=>{
							that.stepSwiperHeight=rectBox.height;
						}).exec();
					}, 200);
				}else if(that.stepIndex>=2){
					setTimeout(()=>{
						let queryBox = uni.createSelectorQuery().in(that).select('.foodresult-box');
						queryBox.boundingClientRect((rectBox)=>{
							that.stepSwiperHeight=rectBox.height;
						}).exec();
					}, 200);
				}
			},
			
			switchPerson(obj){
				var mealindex = obj.mealindex;
				var personindex = obj.personindex;
				if(obj.checked){
					this.daySetting.mealList[mealindex].personList[personindex].useflag=1;
				}else{
					this.daySetting.mealList[mealindex].personList[personindex].useflag=0;
				}
				
				var usecount=0;
				var unusecount=0;
				for(var i=0; this.daySetting.mealList[mealindex].personList!=null && i<this.daySetting.mealList[mealindex].personList.length; i++){
					if(this.daySetting.mealList[mealindex].personList[i].useflag == 1){
						usecount++;
					}else{
						unusecount++;
					}
				}
				this.daySetting.mealList[mealindex].usecount=usecount;
				this.daySetting.mealList[mealindex].unusecount=unusecount;
			},
			
			addPerson(e){
				var useflag = e.currentTarget.dataset.useflag;
				uni.navigateTo({
					url: '/pages/setting/person/detail?useflag=' + useflag + '&operflag=add'
				})
			},
			
			editPerson(obj){
				var mealindex = obj.mealindex;
				var personindex = obj.personindex;
				var userid = this.daySetting.mealList[mealindex].personList[personindex].id;
				uni.navigateTo({
					url: '/pages/setting/person/detail?id=' + userid + '&operflag=edit'
				})
			},
			
			deletePerson(e){
				var that = this;
				var mealindex = e.currentTarget.dataset.mealindex;
				var personindex = e.currentTarget.dataset.personindex;
				var userid = this.daySetting.mealList[mealindex].personList[personindex].id;
				//var index = e.currentTarget.dataset.index;
				uni.showModal({
					title: '温馨提示',
					content: '就餐人员信息可在个人中心回收站中找回，是否确认删除!',
					cancelText: '取消',
					cancelColor: that.setting.corg,
					confirmText: '删除',
					confirmColor: that.setting.corr,
					success(res){
						if(res.confirm){
							uni.showToast({
								title: '删除成功'
							})
							
							this.daySetting.mealList[mealindex].personList.splice(personindex, 1);
							var usecount=0;
							var unusecount=0;
							for(var i=0; this.daySetting.mealList[mealindex].personList!=null && i<this.daySetting.mealList[mealindex].personList.length; i++){
								if(this.daySetting.mealList[mealindex].personList[personindex].useflag == 1){
									usecount++;
								}else{
									unusecount++;
								}
							}
							this.daySetting.mealList[mealindex].usecount=usecount;
							this.daySetting.mealList[mealindex].unusecount=unusecount;
						}
					}
				})
			},
			
			deleteRestMaterial(e){
				audio.playClick();
				console.log(e);
				var index = e.currentTarget.dataset.index;
				this.daySetting.restMaterialList.splice(index, 1);
			},
			
			showMaterialDrawer(e){
				this.$refs['materialDrawer'].open();
			},
			
			closeMaterialDrawer(e){
				this.$refs['materialDrawer'].close();
			},
			
			showFoodDrawer(e){
				var mealindex = e.currentTarget.dataset.mealindex;
				this.$refs['foodDrawer'][mealindex].open();
			},
			
			closeFoodDrawer(e){
				var mealindex = e.currentTarget.dataset.mealindex;
				this.$refs['foodDrawer'][mealindex].close();
			},
			
			changeDrawer(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e;
			},
			
			checkAppointFoodFlag(obj){
				var mealindex = obj.mealindex;
				this.daySetting.mealList[mealindex].appointfoodflag=obj.checked;
			},
			
			swipeFoodResultMeal(e){
				this.daySetting.foodResultTabIndex=e.detail.current;
			},
			
			checkFoodResultMeal(e){
				this.daySetting.foodResultTabIndex=e.currentTarget.dataset.index;
			},
			
			checkEnergyExpand(){
				audio.playClick();
				this.daySetting.energyExpandFlag=!this.daySetting.energyExpandFlag;
				this.flushStepSwiperHeight();
			},
			
			checkPersonExpand(){
				audio.playClick();
				this.daySetting.personExpandFlag=!this.daySetting.personExpandFlag;
				this.flushStepSwiperHeight();
			}
		}
	}
</script>

<style>
	.meal-choose-box{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.meal-choose-title{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 16px;
		font-weight: bold;
		padding: 25px 0px;
	}
	
	.meal-choose-wrapper{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.meal-choose-switch{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.meal-choose-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 70%;
		margin-bottom: 20px;
	}
	
	.meal-choose-btn{
		font-size: 16px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 70%;
		margin-bottom: 20px;
	}
	
	.meal-choose-meals{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-start;
		width: calc( 100% - 40px );
		padding: 0px 20px;
		margin: 20px 0px;
	}
	
	.meal-choose-meal{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 30%;
	}
	
	.meal-choose-combinemeal{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 45%;
	}
	
	.uni-card{
		width: 100%;
	}
	
	.meal-choose-food{
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		word-break: break-all;
		width: 100%;
	}
	
	.setting-box{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.setting-steps{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 20px;
	}
	
	.step-wrapper{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.section-box{
		width: 100%;
	}
	
	.person-box{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.person-list{
		display: flex; 
		flex-wrap: wrap;
		width: 100%;
		word-break: break-all;
		white-space: wrap;
	}
	
	.list-item-btn{
		padding: 0px 10px;
	}
	
	.person-item{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 50%;
	}
	
	.person-detail{
		padding: 4px 0px;
	}
	
	.person-remark{
		font-size: 12px;
		color: #999;
	}
	
	.person-bmi{
		padding: 4px 0px 0px 0px;
	}
	
	.tag-box{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		word-break: break-all;
		white-space: wrap;
	}
	
	.tag-item{
		padding: 5px 5px 5px 0px;
		color: #999;
		font-size: 12px;
	}
	
	.card-actions{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
	}
	
	.card-actions-item{
		padding: 6px 0px 6px 6px;
	}
	
	.meal-setting-field{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.meal-setting-material-box{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.meal-setting-material-labels{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		width: calc( 90% - 50px );
		border: 1px solid #f1f1f1;
		min-height: 100px;
		border-radius: 5px;
		padding: 10px 5px;
		flex-wrap: wrap;
		flex: 1;
		margin: 0px 20px;
	}
	
	.meal-setting-material-label{
		padding: 5px 10px;
		background-color: #f1f1f1;
		color: #666;
		position: relative;
		margin: 8px;
		border-radius: 5px;
		font-size: 12px;
	}
	
	.material-drawer{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 90%;
		background-color: #fff;
	}
	
	.material-head{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding-top: 20px;
	}
	
	.label-close{
		position: absolute;
		top: -15px;
		right: -15px;
		padding: 5px;
	}
	
	.meal-setting-title{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		font-weight: bold;
		font-size: 16px;
		margin: 20px 0px;
	}
	
	.meal-setting-checkbox{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 90%;
	}
	
	.meal-setting-checkbox-item{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 40%;
		height: 50px;
		line-height: 50px;
		font-size: 16px;
		border-radius: 50px;
	}
	
	.meal-setting-add{
		border: 1px dashed #ccc;
		padding: 15px;
		border-radius: 10px;
	}
	
	.foodresult-box{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.foodresult-wrapper{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		font-size: 14px;
	}
	
	.foodresult-tabbar{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 80%;
		height: 50px;
	}

	.foodresult-tab-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #666;
		padding: 0px 10px;
	}
	
	.foodresult-item-name.active{
		color: #33b4ff;
		font-weight: bold;
		font-size: 16px;
	}
	
	.foodresult-item-line{
		background-color: #33b4ff;
		width: 40%;
		height: 2px;
		margin-top: 4px;
	}
	
	.foodresult-block{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.foodresult-block .uni-section{
		width: 100%;
	}
	
	.foodresult-swiper{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 260px;
	}
	
	.foodresult-swiper-box{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.foodresult-group-container{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}
	
	.group-item{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.image-wrapepr{
		position: relative;
		width: 100%;
	}
	
	.group-image{
		background-color: #000;
		width: 100%;
	}
	
	.image-name{
		color: #fff;
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: calc( 100% - 20px );
		background-color: rgba(0,0,0,0.3);
		height: 50px;
		line-height: 50px;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		word-break: break-all;
		font-size: 14px;
		padding: 0px 10px 0px 10px;
		margin-bottom: 5px;
	}
	
	.foodresult-func-change{
		font-size: 12px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 4px 10px;
	}
	
	.foodresult-statistic{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: calc( 100% - 20px );
		padding: 5px 10px;
	}
	
	.foodresult-section{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding: 0px 0px;
	}
	
	/* .foodresult-section-remark{
		font-size: 12px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
		padding: 6px 0px;
	} */
	
	.foodresult-section-table{
		border: 1px solid #f1f1f1;
		border-radius: 5px;
		color: #333;
		font-size: 12px;
		line-height: 32px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
	}
	
	.foodresult-nutrition-data{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
	}
	
	.foodresult-nutrition-block{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		padding: 5px 0px;
	}
	
	.foodresult-nutrition-name{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		font-size: 12px;
	}
	
	.foodresult-nutrition-remark{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 3px 0px;
	}
	
	.foodresult-nutrition-left{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 80%;
	}
	
	.foodresult-nutrition-right{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 20%;
	}
	
	.foodresult-nutrition-contains{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		font-size: 12px;
		color: #999;
	}

	.foodresult-nutrition-label{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	
	.foodresult-nutrition-value{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	
	.foodresult-data-block{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 28%;
		padding: 5px;
	}
	
	.foodresult-data-title{
		line-height: 32px;
		font-weight: bold;
		font-size: 14px;
	}
	
	.foodresult-data-rows{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
	}
	
	.foodresult-data-row{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}

	.foodresult-data-label{
		font-size: 12px;
	}
	
	.foodresult-data-value{
		font-size: 12px;
	}
</style>
